import React, { Component } from 'react';
import { Image, ImageBackground,ScrollView, StyleSheet, Text, Dimensions, TouchableOpacity } from 'react-native';

let image1 = require('../assets/guide/guju_guide1.png');
let image2 = require('../assets/guide/guju_guide2.png');
let image3 = require('../assets/guide/guju_guide3.png');
let image4 = require('../assets/guide/guju_guide4.png');

import { StackActions,NavigationActions } from 'react-navigation';

const { width, height } = Dimensions.get('window');

const resetAction = StackActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({routeName:'Main'})//要跳转到的页面名字
    ]
});
export default class guideView extends Component {
    constructor() {
        super();
    };
    render() {
        return (
            <ScrollView
                contentContainerStyle={styles.contentContainer}
                bounces={false}
                pagingEnabled={true}
                horizontal={true}>
                <Image source={image1}
                       style={styles.backgroundImage} />
                <Image source={image2} style={styles.backgroundImage} />
                <Image source={image3} style={styles.backgroundImage} />

                <ImageBackground source={image4} style={[styles.backgroundImage,styles.btnOut]} >
                    <TouchableOpacity activeOpacity={0}
                        style={styles.btn}
                        onPress={() => {
                            this.props.navigation.dispatch(resetAction);
                        }}
                    >
                    </TouchableOpacity>
                </ImageBackground>

            </ScrollView>);
    }
};
var styles = StyleSheet.create({
    contentContainer: {
        width: width * 4,
        height: height,
    },
    backgroundImage: {
        width: width,
        height: height,
    },
    btnOut:{
        alignItems:'center',
    },
    btn:{
        width:150,
        height:50,
        opacity:0,
        backgroundColor:'#fff',
        borderRadius:8,
        justifyContent:'center',
        alignItems:'center',
        marginTop:512,

    },
    btnText:{
        fontSize:18,
        color:'#fff'
    },
});